<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
    <style type="text/css">
        .blackBg{
            width: 400px;
            height: 400px;
            background-color: black;
        }
        .font{
            font-size: 50px;
            color: white;
        }
        

    </style>
<body>
    <div id="d1">helloworld1</div>
    <div id="d2">helloworld2</div>
    <div id="d3" class="donghuad3">helloworld3</div>
    <script type="text/javascript">
      //通过style样式修改
        var d1 = document.querySelector('#d1');
        d1.style.height = '400px';
        d1.style.width = '400px';
        d1.style.backgroundColor = 'yellow';
        console.log([d1]);
        
        //通过classname修改
        var d2 = document.querySelector('#d2');
        d2.className = 'blackBg font';

        d2.classList.add('test');
        d2.classList.replace('blackBg','font')
        d2.classList.remove("font");
        //通过修改style样式修改
        var style = document.querySelector('style');
        style.innerHTML = `.donghuad3{
				width: 300px;
				height: 300px;
				background-color: skyblue;
				animation: donghua 3s alternate infinite;
			}
			@keyframes donghua{
				from{
					transform: translate(0,0);
				}
				to{
					transform: translate(600px,0);
				}
			}`

        var body = document.querySelector("body");
        body.appendChild(style);

    </script>
</body>

</html>